<template>
	<view>
		<up-loading-icon mode="semicircle" text="加载中..." :show="loading"></up-loading-icon>
		<view v-for="(qun,index) in props.modelValue" :key="qun.id">
			<view class="user-item" @tap="goPage(`/pageSubOne/group/group-join?id=${qun.id}`)" v-if="qun">
				<!-- <image :src="qun.headImage" alt="" class="avr-img" /> -->
				<head-image :url="qun.headImage" :name="qun.name" :size="90" :isGroup="true"></head-image>
				<view class="user-name">
					<view class="fc">
						<badge type="business-group" :title="qun.badge" v-if="qun.groupType == 2"></badge>
						<text
							style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">{{ qun.name }}</text>
					</view>
					<view class="board">
						<BoardPanel width="150" v-model="qun.id" height="25" />
					</view>
					<view class="user-person">
						<!-- <uni-icons type="person" size="22"></uni-icons> -->
						<svg-icon icon="人数" :width="34"></svg-icon>
						<text style="color: #535862;">{{ qun.memberSize }}人</text>
					</view>
				</view>
				<view class="user-btns">
					<!-- <button class="btncolor" type="primary" v-show="!haveGroup(qun.id)" size="mini"
						@click.stop="onAddGroup(qun)">加入群聊</button> -->
					<!-- <button class="btncolor" type="primary" v-if="!haveGroup(qun.id) && qun.groupType == 2"
						size="mini" @tap.stop.native="addGroup(qun.id)">加入群聊</button> -->
					<button class="btncolor" type="primary" v-if="!haveGroup(qun.id)" size="mini"
						@tap.stop.native="goPage(`/pageSubOne/group/group-join?id=${qun.id}`)">申请群聊</button>
					<button class="default" type="default" style="color: #aaa;" v-if="haveGroup(qun.id)"
						size="mini">已添加</button>
				</view>
			</view>
			<up-divider v-if="index != props.modelValue.length-1" :hairline="true" lineColor='#F5F5F5'></up-divider>
		</view>
		<view style="width: 90%;margin: 20px auto;">
			<up-button type="primary" v-if="hasNext" :loading="loading" @tap="emit('next')">加载更多</up-button>
		</view>
		<up-empty v-if="!loading && modelValue.length == 0" :icon="getResource('/icon/empty-find.svg')"
			text="未搜索到相关内容,请尝试切换分类">
		</up-empty>
	</view>
</template>

<script setup>
	import BoardPanel from '@/components/board-panel/board-panel.vue';
	import {
		defineProps,
		defineEmits
	} from 'vue';
	import useGroupStore from '@/store/groupStore.js'
	const props = defineProps({
		modelValue: {
			type: Array,
			default: () => []
		},
		loading: {
			type: Boolean,
			default: true
		},
		hasNext: {
			type: Boolean,
			default: false
		}
	})
	const emit = defineEmits(['next'])
	const groupStore = useGroupStore()
	const haveGroup = (id) => {
		let group = groupStore.groups.find((g) => g.id == id)
		return !!group
	}
</script>

<style lang="scss" scoped>
	.user-item {
		display: flex;
		margin-bottom: 1rpx;
		position: relative;
		// padding: 0 30rpx;
		align-items: center;
		background-color: white;
		white-space: nowrap;
		margin-top: 20rpx;
		gap: 20rpx;

		.btncolor {
			background-color: $brand-500;
			color: $white;
			border-radius: 34rpx;
		}

		.default {
			border-radius: 34rpx;
			border: 1rpx solid $gray-200;
		}

		.user-name {
			flex: 1;
			font-size: 30rpx;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;

			.board {
				pointer-events: none;
			}
		}

		.user-person {
			display: flex;
			align-items: center;
			gap: 10rpx;
			font-size: 26rpx;

			.sex-img {
				width: 35rpx;
				height: 35rpx;
			}
		}
	}
</style>